<!DOCTYPE HTML>
<html lang="zh-CN" manifest="h5.manifest">
    <head>
        <meta charset="utf-8"/>
        <title>大学加调查问卷</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href="./bootstrap.min.css" rel="stylesheet">
        <script src="./jquery-1.11.2.min.js"></script>
        <script src="./bootstrap.min.js"></script>
        <script>
            //打开数据库
            var db = openDatabase('contactdb2.db', '', 'local database demo', 204800);
            //保存数据
            function save() {
                var username = document.getElementById("iptusername").value;
                var mobile = document.getElementById("iptmobile").value;
                var sex = $('input:radio[name=sex]:checked').val();
                var zhuangye = document.getElementById("iptzhuangye").value;
                var q1 = $('input:radio[name=q1]:checked').val();
                var q2 = $('input:radio[name=q2]:checked').val();
                var q3 = $('input:radio[name=q3]:checked').val();
                var q4 = $('input:radio[name=q4]:checked').val();
                var q5 = $('input:radio[name=q5]:checked').val();
                var q6 = $('input:radio[name=q6]:checked').val();
                var q7 = $('input:radio[name=q7]:checked').val();
                var q8 = $('input:radio[name=q8]:checked').val();
                var q9 = $('input:radio[name=q9]:checked').val();
                var q10 = $('input:radio[name=q10]:checked').val();
                var q11 = $('input:radio[name=q11]:checked').val();
                alert(q1);
                //创建时间
                var time = new Date().getTime();
                db.transaction(function(tx) {
                    tx.executeSql('insert into contact values(NULL,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,0)', [username, mobile, sex, zhuangye,q1,q2,q3,q4,q5,q6,q7,q8,q9,q10,q11,time], onSuccess, onError);
                });
            }

            //sql语句执行成功后执行的回调函数
            function onSuccess(tx, rs) {
                alert("操作成功");
                loadAll();
            }

            //sql语句执行失败后执行的回调函数
            function onError(tx, error) {
                alert("操作失败，失败信息：" + error.message);
            }

            //将所有存储在sqlLite数据库中的联系人全部取出来
            function loadAll() {
                var list = document.getElementById("list");
                db.transaction(function(tx) {
                    //如果数据表不存在，则创建数据表
                    var cat_sql='create table if not exists contact(uid integer PRIMARY KEY autoincrement,';
                    cat_sql+='username text,mobile text,sex text,zhuangye text,q1 text,q2 text,q3 text,q4 text,q5 text,q6 text,';
                    cat_sql+='q7 text,q8 text,q9 text,q10 text,q11 text,createtime INTEGER,isstatus INTEGER)';
                    tx.executeSql(cat_sql, []);
                    //查询所有联系人记录
                    tx.executeSql('select * from contact', [], function(tx, rs) {
                        if (rs.rows.length > 0) {
                            var result = '<table class="table">';
                            result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>性别</th><th>专业</th><th>q1</th><th>q2</th><th>q3</th><th>q4</th>";
                            result += "<th>q5</th><th>q6</th><th>q7</th><th>q8</th><th>q9</th><th>q10</th><th>q11</th>";
                            result += "<th>添加时间</th><th>操作</th></tr>";
                            for (var i = 0; i < rs.rows.length; i++) {
                                var row = rs.rows.item(i);
                                //转换时间，并格式化输出
                                var time = new Date();
                                time.setTime(row.createtime);
                                var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
                                //拼装一个表格的行节点
                                result += "<tr><td>" + (i + 1) + "</td><td>" + row.username + "</td><td>" + row.mobile + "</td><td>" + row.sex + "</td><td>";
                                result +=row.zhuangye + "</td><td>" + row.q1 + "</td><td>"+ row.q2 + "</td><td>"+ row.q3 + "</td><td>"+ row.q4 + "</td><td>"+ row.q5 + "</td><td>";
                                result +=row.q6 + "</td><td>"+ row.q7 + "</td><td>"+ row.q8 + "</td><td>"+ row.q9 + "</td><td>"+ row.q10 + "</td><td>"+ row.q11 + "</td><td>";
                                result += timeStr + "</td><td><input type='button' value='删除' onclick='del(" + row.uid + ")'/></td></tr>";
                            }
                            list.innerHTML = result;
                        } else {
                            list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
                        }
                    });
                });
            }


            Date.prototype.format = function(format) {
                var o = {
                    "M+" : this.getMonth() + 1, //month
                    "d+" : this.getDate(), //day
                    "h+" : this.getHours(), //hour
                    "m+" : this.getMinutes(), //minute
                    "s+" : this.getSeconds(), //second
                    "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
                    "S" : this.getMilliseconds() //millisecond
                }
                if (/(y+)/.test(format))
                    format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                return format;
            }
            //删除联系人信息
            function del(uid) {
                db.transaction(function(tx) {
                    //注意这里需要显示的将传入的参数phone转变为字符串类型
                    tx.executeSql('delete from contact where uid=?', [String(uid)], onSuccess, onError);
                });
                loadAll();
            }
        </script>
        <style>
            
        </style>
    </head>
    <body onload="loadAll()">
        <nav class="main-nav navbar navbar-inverse navbar-static-top clearfix">
            <!-- navbar-fixed-top -->
            <div class="container-fluid">
                <a class="navbar-brand" href="http://www.iic.cn/"> 北理工学生互联网创业问卷调查</a>
            </div>
        </nav>
        <div id="main-container" class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <h1>北理工学生互联网创业问卷调查</h1>
                    <p>
                        亲爱的同学们：
                        您好！面对互联网技术的高速发展，我们正处于『互联网+』的时代，我们的生活越来越离不开互联网，为此我们组织了这次的问卷调查。调查会占用您宝贵几分钟时间，请您认真填写您的信息，我们将会用来统计分析，非常感谢您的参与！
                    </p>
                    <div class="form-group">
                        <label for="iptusername">姓名：</label>
                        <input type="text" name="username" class="form-control" id="iptusername" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-group">
                        <label for="iptmobile">电话：</label>
                        <input type="text" class="form-control" name="mobile" id="iptmobile" placeholder="请输入您的联系电话">
                    </div>
                    <div class="form-group">
                        <label for="iptsex">性别：</label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="男生">
                            男生</label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="女生">
                            女生</label>
                    </div>
                    <div class="form-group">
                        <label for="iptzhuangye">所学专业：</label>
                        <input type="text" name="zhuangye" class="form-control" id="iptzhuangye" placeholder="请输入您的所学专业">
                    </div>
                    <div class="form-group">
                        <label for="q1">Q1、您的年级：</label>
                        <label class="radio-inline">
                            <input type="radio" name="q1" value="A">
                            大一</label>
                        <label class="radio-inline">
                            <input type="radio" name="q1" value="B">
                            大二</label>
                        <label class="radio-inline">
                            <input type="radio" name="q1" value="C">
                            大三</label>
                        <label class="radio-inline">
                            <input type="radio" name="q1" value="D">
                            大四</label>
                    </div>
                    <div class="form-group">
                        <label for="q2">Q2、 您认为目前普通大学生就业形势如何？</label>
                        <label class="radio-inline">
                            <input type="radio" name="q2" value="A">
                            十分严峻，很难找到合适工作</label>
                        <label class="radio-inline">
                            <input type="radio" name="q2" value="B">
                            一般严峻，但比其他低学历人群要容易</label>
                        <label class="radio-inline">
                            <input type="radio" name="q2" value="C">
                            有点严峻，与其他低学历人群差不多</label>
                        <label class="radio-inline">
                            <input type="radio" name="q2" value="D">
                            不了解</label>
                    </div>
                    <div class="form-group">
                        <label for="q3">Q3、当你毕业时，你会选择：</label>
                        <label class="radio-inline">
                            <input type="radio" name="q3" value="A">
                            根据专业就业</label>
                        <label class="radio-inline">
                            <input type="radio" name="q3" value="B">
                            根据兴趣就业</label>
                        <label class="radio-inline">
                            <input type="radio" name="q3" value="C">
                            继续深造</label>
                        <label class="radio-inline">
                            <input type="radio" name="q3" value="D">
                            自主创业</label>
                    </div>
                    <div class="form-group">
                        <label for="q4">Q4、您认为在学校学到的知识能满足您自身的需求吗？：</label>
                        <label class="radio-inline">
                            <input type="radio" name="q4" value="A">
                            完全满足</label>
                        <label class="radio-inline">
                            <input type="radio" name="q4" value="B">
                            部分满足，没有实践经验</label>
                        <label class="radio-inline">
                            <input type="radio" name="q4" value="C">
                            完全不能满足，需要提升理论和实践经验</label>
                        <label class="radio-inline">
                            <input type="radio" name="q4" value="D">
                            不知道或不清楚</label>
                    </div>
                    <div class="form-group">
                        <label for="q5">Q5、对互联网的了解：</label>
                        <label class="radio-inline">
                            <input type="radio" name="q5" value="A">
                            深刻</label>
                        <label class="radio-inline">
                            <input type="radio" name="q5" value="B">
                            一般</label>
                        <label class="radio-inline">
                            <input type="radio" name="q5" value="C">
                            不了解</label>
                    </div>
                    <div class="form-group">
                        <label for="q6">Q6、您有创业的想法吗？</label>
                        <label class="radio-inline">
                            <input type="radio" name="q6" value="A">
                            有，已经在计划中</label>
                        <label class="radio-inline">
                            <input type="radio" name="q6" value="B">
                            有，但条件不成熟</label>
                        <label class="radio-inline">
                            <input type="radio" name="q6" value="C">
                            没有</label>
                    </div>
                    <div class="form-group">
                        <label for="q7">Q7、如果创业，你认为你缺乏什么？</label>
                        <label class="radio-inline">
                            <input type="radio" name="q7" value="A">
                            资金</label>
                        <label class="radio-inline">
                            <input type="radio" name="q7" value="B">
                            团队</label>
                        <label class="radio-inline">
                            <input type="radio" name="q7" value="C">
                            能力</label>
                        <label class="radio-inline">
                            <input type="radio" name="q7" value="D">
                            项目</label>
                    </div>
                    <div class="form-group">
                        <label for="q8">Q8、是否觉得现在需要提升互联网技能（互联网策划、开发、推广）？</label>
                        <label class="radio-inline">
                            <input type="radio" name="q8" value="A">
                            是,需要</label>
                        <label class="radio-inline">
                            <input type="radio" name="q8" value="B">
                            不需要</label>
                    </div>
                    <div class="form-group">
                        <label for="q9">Q9、有没有参加过互联网技能培训（互联网策划、开发、推广）？</label>
                        <label class="radio-inline">
                            <input type="radio" name="q9" value="A">
                            有</label>
                        <label class="radio-inline">
                            <input type="radio" name="q9" value="B">
                            无</label>
                    </div>
                    <div class="form-group">
                        <label for="q10">Q10、如果有项目提供，您有兴趣加入我们的团队一起努力吗？</label>
                        <label class="radio-inline">
                            <input type="radio" name="q10" value="A">
                            有意</label>
                        <label class="radio-inline">
                            <input type="radio" name="q10" value="B">
                            可以考虑</label>
                        <label class="radio-inline">
                            <input type="radio" name="q10" value="C">
                            没兴趣</label>
                    </div>
                    <div class="form-group">
                        <label for="q11">Q11、如果有免费培训（互联网策划、开发、推广）和创业机会你有什么看法：</label>
                        <label class="radio-inline">
                            <input type="radio" name="q11" value="A">
                            我想参加</label>
                        <label class="radio-inline">
                            <input type="radio" name="q11" value="B">
                            想了解</label>
                        <label class="radio-inline">
                            <input type="radio" name="q11" value="C">
                            没兴趣</label>
                    </div>
                    <button type="button" class="btn btn-default" onclick="save()">
                        感谢您的参与，谢谢！
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>